<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 表单</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="back">
        <a href="../../index.html">返回</a>
    </div>
    <div class="item form">
        <h2 class="item-header">HTML 表单</h2>
        <div class="item-meta">
            <form>
                <fieldset>
                    <legend>单选按钮组</legend>
                    <label>单选按钮1
                        <input type="radio" name="radio"  >
                    </label>
                    <label>单选按钮2
                        <input type="radio" name="radio"  >
                    </label>
                    <label>单选按钮3
                        <input type="radio" name="radio"  >
                    </label>
                </fieldset>
                <fieldset>
                    <legend>多选按钮组</legend>
                    <label>多选按钮1
                        <input type="checkbox" name="checkbox"  >
                    </label>
                    <label>多选按钮2
                        <input type="checkbox" name="checkbox"  >
                    </label>
                    <label>多选按钮3
                        <input type="checkbox" name="checkbox"  >
                    </label>
                    <label>多选按钮4
                        <input type="checkbox" name="checkbox"  >
                    </label>
                </fieldset>
                <fieldset>
                    <legend>其它 input 组</legend>
                    <label>文本输入框<input type="text" placeholder="文本输入框"></label><br>
                    <label>颜色选择器<input type="color" name="color"></label><br>
                    <label>密码输入框<input type="password" name="password" ></label><br>
                    <label>图片按钮<input type="image" src="./images/earth.gif" alt="earth" width="50"></label><br>
                    <label>file 上传文件<input type="file" name="file"></label><br>
                    <label>按钮</label>
                    <input type="button" value="按钮">
                    <input type="submit" value="发送submit">
                    <input type="reset" value="重置reset"><br>
                    <label>data日期<input type="date" name="date"></label><br>
                    <label>datetime<input type="datetime" name="datetime"></label><br>
                    <label>datetime-local<input type="datetime-local" name="datetime-local"  ></label><br>
                    <label>month<input type="month" name="month"></label><br>
                    <label>week<input type="week" name="week"></label><br>
                    <label>time<input type="time" name="time"></label><br>
                    <label>email<input type="email" name="email"></label><br>
                    <label>hidden<input type="hidden" name="hidden"></label><br>
                    <label>number带有min和max<input type="number" name="number"  min="10" max="20"></label><br>
                    <label>range<input type="range" name="range" min="0" max="100" value="50"></label><br>
                    <label>tel带有minlength<input type="tel" name="tel" minlength="11"></label><br>
                    <label>url<input type="url" name="url"></label><br>
                    <label>search<input type="search" name="search"></label>
                </fieldset>
                <fieldset>
                    <legend>其它表单标签</legend>
                    <textarea name="textarea" cols="30" rows="5" placeholder="textarea标签"></textarea>
                    <select name="select1">
                        <option>下拉列表1</option>
                        <option>下拉列表2</option>
                        <option>下拉列表3</option>
                        <option>下拉列表4</option>
                        <option>下拉列表5</option>
                    </select>
                    <select name="select2" id="" disabled="disabled">
                        <option>禁止选取</option>
                    </select>
                    <button>按钮</button>
                    <button disabled="disabled">disabled</button>
                    <button type="reset">reset</button>
                    <button type="submit">submit</button>                  
                </fieldset>
            </form>
            <p>
                <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms">了解表单更多信息</a>
            </p>
        </div>
    </div>
</body>

</html>